<template>
  <div class="t-sort" @click="onSort">
    <span class="text" :style="{ color: `${value ? labelActiveColor : ''}`, fontSize: labelSize, fontWeight: labelWeight }">{{
      label ? label : $t('goods.priceSort') }}</span>
    <span class="ivu-table-sort">
      <i class="ivu-icon ivu-icon-md-arrow-dropup" :class="status == 'desc' ? 'active' : ''"></i>
      <i class="ivu-icon ivu-icon-md-arrow-dropdown" :class="status == 'asc' ? 'active' : ''"></i>
    </span>
  </div>
</template>

<script>
export default {
  name: "t-sort",
  props: {
    value: String, // 默认值
    label: String,
    //label高亮的颜色
    labelActiveColor: {
      type: String,
      default: ''
    },
    labelSize: {
      type: String,
      default: '14px'//24px
    },
    labelWeight: {
      type: Number,
      default: 500
    }
  },
  data() {
    return {
      status: this.value,
    }
  },
  watch: {
    value() {
      this.status = this.value;
    },
  },
  methods: {
    onSort() {
      let name;
      if (this.status == '') {
        name = 'asc';
      }
      if (this.status == 'asc') {
        name = 'desc';
      }
      if (this.status == 'desc') {
        name = '';
      }
      this.$emit('input', name);
      this.$emit('on-change', name);
    }
  }
}
</script>

<style scoped lang="less">
.t-sort {
  display: inline-flex;
  align-items: baseline;
  cursor: pointer;
  user-select: none;

  .text {
    font-family: PingFang SC, PingFang SC;
    // font-weight: 500;
    // font-size: 24px;
    color: #767B93;
    line-height: 27px;
  }

  .ivu-table-sort {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .active {
    color: @primary-color;
  }
}
</style>